<template>
  <div id="flow-design-map" class="flow-design-map">
    <img :src="$store.flow.mapImg" />
    <div id="flow-design-map-mask" class="map-mask" :style="mapMask" @mousedown="handleMouseDown" @mouseup="handleMouseUp" @mouseleave="handleMouseUp"></div>
  </div>
</template>
<script lang="ts" setup name="FlowMap">
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	element: {
    type: String,
    default: '#flow-design-content',
  },
});

const state=reactive({
  // 流程设计窗口
  flowDesign: null,
  // 地图窗口
  flowMap: null,
  // 地图窗口占比窗口(红色窗口)
  flowMapMsk: null,
  // 流程设计整体高度,包含滚动条隐藏高度
  wrapHeight: 0,
  // 地图红色窗口top位置
  top: 0,
  // 鼠标是否点击
  mouseDown: false,
  timer:null,
})
// 流程图视窗高度与流程总高度的比
const scaleHeight = computed(() => {
	return containerHeight / state.wrapHeight;
});
// 小地图高度与流程总高度的比
const scaleOffsetHeight = computed(() => {
	if (!state.flowMap && state.wrapHeight) {
    return 1;
  }
  return state.flowMap.clientHeight / state.wrapHeight;
});
// 流程图视窗高度
const containerHeight = computed(() => {
	if (state.flowDesign) {
    return state.flowDesign.clientHeight;
  }
  return 0;
});
// 地图窗口占比窗口(红色窗口)样式
const mapMask = computed(() => {
	return {
    width: '100%',
    height: `${scaleHeight * 100}%`,
    left: '0px',
    top: `${state.top}px`,
  };
});

//------------------初始化------------------------------
onMounted(()=>{
  nextTick(() => {
    state.flowDesign = document.querySelector('#flow-design');
    state.flowMap = document.querySelector('#flow-design-map');
    state.flowMapMsk = document.querySelector('#flow-design-map-mask');
    initSize(state.flowDesign);
    $store.flow.UP_MAP({ element: props.element });
    // 监听滚动条
    window.addEventListener('scroll', handleScroll, true);
    // 监听出现滚动条
    state.timer = setInterval(() => {
      if (state.flowDesign.scrollHeight > state.flowDesign.clientHeight) {
        this.scroll = true;
      } else {
        this.scroll = false;
      }    
      initSize(state.flowDesign);
    }, 1000);
    // 监听鼠标移动
    window.addEventListener('mousemove', handleMouseMove);
    // 监听页面的mouseleave事件，当鼠标移出浏览器页面可用区域 并 松开按键时，停止拖动
    window.addEventListener('mouseleave', handleMouseUp);
  });
})
onDeactivated(() => {
  if(state.timer){
    clearInterval(state.timer);
  }
  window.removeEventListener('scroll', handleScroll)
})
function initSize(flowDesign) {
        state.wrapHeight = flowDesign.scrollHeight;
}
function handleScroll() {
  state.top = state.flowDesign.scrollTop * scaleOffsetHeight;
}
function handleMouseDown() {
    state.mouseDown = true;
}
function handleMouseMove(e) {
  if (state.mouseDown) {
    const directionY = e.movementY || e.mozMovementY || e.webkitMovementY || 0;
    if (directionY >= 0 && state.flowMapMsk.offsetHeight + state.top < state.flowMap.offsetHeight) {
      state.top++;
    } else if (this.top > 0) {
      state.top--;
    }
    state.flowDesign.scrollTop = state.top / scaleOffsetHeight;
  }
}
function handleMouseUp() {
  state.mouseDown = false;
  document.onmousemove = document.onmouseup = null;
}

</script>
